import React from 'react';
import { sysUploadUrl } from '../../../../../../Api/fileUrl';
import {
    postActDeploymentCreateDeployment
} from '../../../../../../Api/setUrl'
import { Modal, Form, Input, Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const AddDeploymentModule = ({ AddDeploymentModuleShow, setAddDeploymentModuleShow, listFun }) => {
    const [form] = Form.useForm();
    const {validateFields, resetFields} = form;
    const handleOk = () => {
        validateFields().then(values => {
            values.url = values.url.fileList[0].response.data;
            ;(async () => {
                const {code, msg} = await postActDeploymentCreateDeployment(values);
                if(code === '20000'){
                    message.success('部署成功！');
                    resetFields()
                    setAddDeploymentModuleShow(false);
                    listFun()
                }else{
                    message.error(msg);
                }
            })()
        })
    };

    const handleCancel = () => {
        resetFields();
        setAddDeploymentModuleShow(false);
    };
    const props = {
        name: 'file',
        action: sysUploadUrl(),
        maxCount: 1,
        headers: {
            authentication: sessionStorage.getItem("token")
        },
        data: {
            folder: '/actZip'
        },
        onChange(info) {
            if (info.file.status === 'done') {
                message.success(`${info.file.name} 上传成功！`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败！`);
            }
        },
    };
    return <Modal 
        title="部署" 
        visible={AddDeploymentModuleShow} 
        onOk={handleOk} 
        onCancel={handleCancel}
        width = {610}
    >
        <div>费用审批流程的key: financial
生产工作流程的key :production
费用反馈流程key: feedBack
</div>
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form = {form}
        >
            <Form.Item
                label="流程Key"
                name="key"
                rules={[{ required: true, message: '请输入流程Key！' }]}
            >
                <Input />
            </Form.Item>
            {/* <Form.Item
                label="流程名称"
                name="name"
                rules={[{ required: true, message: '请输入流程名称！' }]}
            >
                <Input />
            </Form.Item> */}
            <Form.Item
                label="文件上传"
                name="url"
                // valuePropName="fileList"
                rules={[{ required: true, message: '请输入流程名称！' }]}
            >
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>注： 文件必须是压缩文件（BPMN文件+PNG文件）</Button>
                </Upload>
            </Form.Item>
        </Form>
    </Modal>
}

export default AddDeploymentModule;